<template>
  <el-card style="max-width: 480px">
    <template #header>
      <h1>法强德斩杀计算器</h1>
    </template>
    <el-form ref="formRef" label-width="auto" :model="formData">
      <el-form-item label="欧洛尼乌斯数量" prop="oluo">
        <el-input v-model.number="formData.oluo" />
      </el-form-item>
      <el-form-item label="封面艺人数量" prop="fengmian">
        <el-input v-model.number="formData.fengmian" />
      </el-form-item>
      <el-form-item label="法强地标数量" prop="faqiang">
        <el-input v-model.number="formData.faqiang" />
      </el-form-item>
      <el-form-item label="横扫数量" :title="`当前造成伤害${getShanghaiByOluo(4)}`" prop="hengsao">
        <el-input v-model.number="formData.hengsao" />
      </el-form-item>
      <el-form-item label="银樽数量(杯)" :title="`当前造成伤害${getShanghaiByOluo(2)}`" prop="yinzun">
        <el-input v-model.number="formData.yinzun" />
      </el-form-item>
      <el-form-item label="闪光试剂瓶数量" :title="`当前造成伤害${getShanghaiByOluo(2)}`" prop="shanguang">
        <el-input v-model.number="formData.shanguang" />
      </el-form-item>
      <el-form-item label="场攻" prop="changgong">
        <el-input v-model.number="formData.changgong" />
      </el-form-item>
      <el-form-item label="其他法强" prop="otherFq">
        <el-input v-model.number="formData.otherFq" />
      </el-form-item>
      <el-form-item label="其他额外伤害" prop="other">
        <el-input v-model.number="formData.other" />
      </el-form-item>
    </el-form>
    <div>
      可能需要消耗的法力水晶为（地标已提前放置）：{{ totalSJ }}  <br>
      <el-button type="primary" @click="resetForm(formRef)" style="margin-top: 20px;">重置</el-button>
    </div>
    <template #footer>
      <div style="font-size: 14px;font-weight: bold; margin-bottom: 20px;"> 最终伤害：</div>
      <span style="color: red;font-size: 20px;font-weight: bolder;">{{ total }}</span>
    </template>
  </el-card>

</template>

<script setup>
import { ref, computed, reactive } from 'vue'
const formRef = ref()
const formData = reactive({
  oluo: 0,
  faqiang: 0,
  hengsao: 0,
  yinzun: 0,
  shanguang: 0,
  changgong: 0,
  otherFq: 0,
  other: 0,
  fengmian: 0
})

const getShanghaiByOluo = (originSH) => {
  const totalOluo = Number(formData.fengmian + formData.oluo)
  const totalFq = Number(totalOluo + formData.faqiang + formData.otherFq)
  return (totalFq * Math.pow(2, totalOluo)) + originSH
}
const total = computed(() => {
  const totalHengsao = getShanghaiByOluo(4) * formData.hengsao;
  const totalYinzun = getShanghaiByOluo(2) * formData.yinzun
  const totalShanguang = getShanghaiByOluo(2) * formData.shanguang
  return totalHengsao + totalYinzun + totalShanguang + Number(formData.changgong) + Number(formData.other)
})

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

const totalSJ = computed(() => {
  return formData.hengsao * 3 + formData.oluo * 7 + formData.fengmian * 4 + formData.yinzun + formData.shanguang * 3
})
</script>